<template>
  <section class="channel-music-container">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="pageLoading"/>

    <!--没有音乐提示-->
    <div class="empty-songs" v-if="!pageLoading && (!broadObj.songlist || !broadObj.songlist.length)">
      <p>
        <van-icon name="music-o" size="80px"/>
      </p>
      <p>空空如也</p>
    </div>

    <div class="channel-music-wrap" v-if="broadObj.songlist && broadObj.songlist.length">
      <p class="channel-title" :style="{'background': bgColorSel}">{{broadObj.channel}}</p>
      <div class="music-list flex flex-align" v-for="(item,index) in broadObj.songlist" :key="index">
        <p class="thumb-img">
          <img :src="item.thumb" alt="">
        </p>
        <span class="song-name">{{item.title}}</span>
        <span class="line"> - </span>
        <span class="singer">{{item.artist}}</span>
      </div>
    </div>


  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {Icon} from "vant";

  @Component({
    components: {
      [Icon.name]: Icon,
    }
  })
  export default class ChannelPage extends Vue {
    private pageLoading: boolean = true;

    // 音乐电台列表
    private broadObj: object = {};

    // 头部背景色数组
    private bgColors: string[] = ["#000", "#0dcca0", "#964848", "#016a35", "#680000",
      "#ff5555", "#556aff", "#c13fec", "#6e3681", "#848085", "#454445", "#2650ae"];
    private bgColorSel: string = "";
    private changeBgTimer: number;

    mounted() {
      // 随机更换头部标题背景色
      this.randomTitleBg();
      this.changeBgTimer = setInterval(() => this.randomTitleBg(), 10000);

      const channelName = this.$route.query.channelName;
      if (!channelName) {
        this.$route.go(-1);
        return;
      }
      this.queryBroadDetail(channelName);
    }

    // 随机更换头部标题背景色
    randomTitleBg() {
      let r = Math.random() * this.bgColors.length;
      let randomIdx = parseInt(r);

      this.bgColorSel = this.bgColors[randomIdx];
    }

    // 点击查询电台详情
    queryBroadDetail(channelname:string) {
      this.pageLoading = true;
      this.$api.get("/musicBroadcastingDetails", {channelname}, "baseUrl2")
        .then((res: any) => {
          if (res && res.songlist) {
            this.broadObj = {
              channel: res.channel,
              songlist: res.songlist.filter(item => item.title)
            };
          }
        })
        .catch((e: any) => {
          this.$toast(e.msg);
        })
        .finally(() => {
          this.pageLoading = false;
        });
    }

    destroyed() {
      clearInterval(this.changeBgTimer);
    }

  }
</script>

<style lang="scss">
  .channel-music-container {
    .channel-music-wrap {
      .channel-title {
        padding: 12px 16px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
      .music-list {
        padding: 10px 16px;
        background: #fff;
        border-bottom: 1px solid #f4f4f4;
        .thumb-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .song-name {
          color: #333;
          font-size: 13px;
          margin-left: 10px;
        }
        .line {
          padding: 0 5px;
        }
        .singer {
          color: #888;
          font-size: 12px;
        }
      }
    }
    .empty-songs {
      margin: 200px auto;
      text-align: center;
    }
  }
</style>

